import React, { useState, useRef, useEffect } from 'react';
import { Space, Table, Tag, Modal, Button, message } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
import { gethazard ,deletehazard,edithazard,addhazard} from '@/api/hazard'
import Userfrom from '@/components/userfrom3/index'
const Animalmanagement = () => {
  const { Search } = Input;
  const [messageApi, contextHolder] = message.useMessage();
  const [size, setSize] = useState('large'); 
  const { confirm } = Modal
  const [userdata, setUser] = useState([])
  const [Searchdata, setSearch] = useState([])
  const [deletedata, setdeleteUser] = useState([])
  const [editdata, seteditUser] = useState([])
  const [editid, seteditUserID] = useState([])
  const [adddata, setaddUser] = useState([])
  const [dataSource, setdataSource] = useState([])
  const [isAddVisible, setisAddVisible] = useState(false)
  const [isUpdateVisible, setisUpdateVisible] = useState(false)
  const [roleList, setroleList] = useState([])
  const [regionList, setregionList] = useState([])
  const [current, setcurrent] = useState(null)
  const [isUpdateDisabled, setisUpdateDisabled] = useState(false)
  const AddForm = useRef(null)
  const UpdateForm = useRef(null)
  const getdata = async () => {
    let { data: { users } } = await gethazard();
    console.log(users);
    setUser(users)
  }
  useEffect(() => {
    getdata()
  }, [])
  const showinfo = (item) => {
  }
  const confirmMethod = (item) => {
    confirm({
      title: '你确定要删除?',
      icon: <ExclamationCircleOutlined />,
      onOk() {
    console.log(item);
    deleteMethod(item)
      },
      onCancel() {
      },
    });
  }
  const deleteMethod = (item) => {
    const { id, role, patientindex } = item;
      deletehazard({ id }).then(res => {
        message.success("删除成功")
        getdata()
    })
    var a = setdataSource(dataSource.filter(data => data.id !== item.id))
}
  let opertateFormLabel = [
    {
      model: "id",
      label: "id",
      type: "input_id",
    },
    {
      model: "title",
      label: "姓名",
      type: "input",
    },
    {
      model: "patient1",
      label: "发展方向",
      type: "input",
    },
    {
      model: "wind",
      label: "实习工资",
      type: "input",
    },
    {
      model: "liverfunction2",
      label: "工作评价",
      type: "input",
    },
    {
      model: "temperature",
      label: "实习时间",
      type: "input",
    },
    {
      model: "birth",
      label: "修改时间",
      type: "date",
    },
    {
      model: "birth",
      label: "新增时间",
      type: "date",
    },
  ]
  const handleUpdate = (item) => {
    setisUpdateVisible(true)
    setTimeout(() => {
      const { birth, id } = item;
      item.birth = dayjs(birth);
      setregionList(opertateFormLabel);
      seteditUserID(id)
      UpdateForm.current.setFieldsValue(item);
    }, 100)
    setcurrent(item)
  }
  const addFormOK = () => {
    AddForm.current.validateFields().then(value => {
      const { birth } = value;
      value.birth = birth.format('YYYY-MM-DD');
      if (userdata.map(v => v.title).indexOf(value.title) != -1) {
        message.error("用户名已存在")
      } else {
        value.id = ++userdata.length
        setisAddVisible(false)
        AddForm.current.resetFields()
       addhazard(value).then((response) => {
        message.success("添加成功!")
        }).catch(e => {
            message.success("添加失败,请重试!")
        })
      }
    }).catch(err => {
    })
  }
  const updateFormOK = () => {
    var a = UpdateForm.current.validateFields().then(value => {
      value.birth = value.birth.format('YYYY-MM-DD');
      var b = userdata.map(v => v.title).indexOf(value.title);
      value.id = editid;
      console.log(value);
      edithazard(value).then((response) => {
          getdata()
      message.success('修改成功！')
      }).catch(e => {
          message.error('修改失败！')
      })
      setisUpdateVisible(false)
      setdataSource(dataSource.map(item => {
        if (item.id === current.id) {
          return {
            ...item,
            ...value,
            role: roleList.filter(data => data.id === value.roleId)[0]
          }
        }
        return item
      }))
      setisUpdateDisabled(!isUpdateDisabled)
    })
  }
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'title',
      key: 'title',
      render: (text) => <h3>{text}</h3>,
    },
    {
      title: '工作方向',
      dataIndex: 'patient1',
      key: 'patient1',
    },
    {
      title: '工作评价',
      dataIndex: 'liverfunction2',
      key: 'liverfunction2',
    },
    {
      title: '实习时间',
      dataIndex: 'temperature',
      key: 'temperature',
      render: (text) => <h3>{text}月</h3>,
    },
    {
      title: '实习工资',
      dataIndex: 'wind',
      key: 'wind',
      render: (text) => <h3>{text} 元/月</h3>,
    },
    {
      title: '新增时间',
      dataIndex: 'birth',
      key: 'birth',
    },
    {
      title: '修改时间',
      dataIndex: 'birth',
      key: 'birth',
    },
    {
      title: "操作",
      render: (item) => {
        return <div>
        <Button danger  icon={<DeleteOutlined />} onClick={() => confirmMethod(item)}>删除</Button>
        <Button type="primary" icon={<EditOutlined />} disabled={item.default} onClick={() => handleUpdate(item)} >修改</Button>
      </div>
      }
    }
  ]
  const handleUpdate2 = () => {
    setisAddVisible(true)
    setregionList(opertateFormLabel);
  }
  return (
    <div>
      <Button onClick={() => {
        handleUpdate2()
      }} type="primary" size={size}>新增</Button>
      <Table columns={columns} dataSource={userdata}
        pagination={{
          pageSize: 6
        }}
        rowKey={item => item.id} />
      <Modal
        open={isUpdateVisible}
        title="更新用户"
        okText="更新"
        cancelText="取消"
        onCancel={() => {
          setisUpdateVisible(false)
          setisUpdateDisabled(!isUpdateDisabled)
        }}
        onOk={() => updateFormOK()}>
        <Userfrom regionList={regionList} roleList={roleList} ref={UpdateForm} isUpdateDisabled={isUpdateDisabled} isUpdate={true}></Userfrom>
      </Modal>
      <Modal
        open={isAddVisible}
        title="添加用户"
        okText="确定"
        cancelText="取消"
        onCancel={() => {
          setisAddVisible(false)
        }}
        onOk={() => addFormOK()}>
        <Userfrom regionList={regionList} roleList={roleList} ref={AddForm}></Userfrom>
      </Modal>
    </div>
  )
}
export default Animalmanagement